<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue 3 v-for </title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      background-color: #f4f4f4;
    }
  </style>
</head>
<body>
<div id="app">
    <table border="1">
        <th>id</th><th>书名</th>
        <tr v-for="course in courses" :key="course.id">
            <td>{{ course.id }}</td><td>{{ course.title }}</td>
        </tr>
    </table>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                courses: [
                    {id: 1, title: 'Java EE平台应用与开发'},
                    {id: 2, title: '软件测试和维护'},
                    {id: 3, title: '计算机操作系统'}
        ]
            };
        }
    });
    app.mount('#app');
</script>
</body>
</html>